<template>
	<div :style="styles" class="statistical !md:w-[242px] md:mr-[24px] flex items-center py-[12px] !px-[16px] <sm:mb-[24px]">
		<div class="flex flex-col text-white h-full w-full">
			<div class="font-bold text-[18px] pb-[16px]">
				{{ leftValue || 0 }}
			</div>
			<div class="text-white">
				<div class="font-bold text-[12px] flex items-end">{{ leftName }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import CountTo from 'vue-count-to';

export default {
	components: {
		CountTo,
	},
	props: {
		leftName: {
			type: String,
			default: '',
		},
		leftValue: {
			type: [String, Number],
			default: null,
		},
		bgColor: {
			type: String,
			default: 'linear-gradient(226deg, #606DD2 0%, #202EAC 100%)',
		},
	},
	data: () => ({}),
	computed: {
		styles() {
			return {
				background: this.bgColor,
			};
		},
	},
};
</script>

<style lang="scss" scoped>
.statistical {
	background: linear-gradient(270deg, #32c2fe 0%, #6786fe 100%);
	@apply w-full rounded-[4px] py-[12px] px-[32px] flex justify-between items-end;
}
</style>
